<template>
  <el-form :model="userInfo" label-width="60px">
    <el-form-item label="邮箱">
      <el-tag :type="getTagType(userInfo.email || '未设置')" size="large">
        {{ userInfo.username || '未设置' }}
      </el-tag>
    </el-form-item>
    <el-form-item label="用户名">
      <el-tag :type="getTagType(userInfo.username || '未设置')" size="large">
        {{ userInfo.name || '未设置' }}
      </el-tag>
    </el-form-item>
    <el-form-item label="手机号">
      <el-tag :type="getTagType(userInfo.phone || '未设置')" size="large">
        {{ userInfo.phone || '未设置' }}
      </el-tag>
    </el-form-item>
    <el-form-item label="性别">
      <el-tag :type="getGenderType(userInfo.sex || '未设置')" size="large">
        {{ userInfo.sex || '未设置' }}
      </el-tag>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const userInfo = JSON.parse(sessionStorage.getItem('userInfo')) || {};

// 根据属性值设置 tag 类型
const getTagType = (value) => {
  return value === '未设置' ? 'default' : 'success'; // 根据需要调整颜色
};

// 获取性别类型
const getGenderType = (sex) => {
  if (sex === '未设置') {
    return 'default'; // 'default' 类型代表未设置
  }
  return sex === '男' ? 'success' : 'info'; // 根据性别设置 tag 类型
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 15px;
}
.el-tag {
  font-size: 14px;
  border: 1px solid #dcdfe6; /* 设置边框颜色 */
  border-radius: 4px; /* 设置边框圆角 */
  padding: 5px 10px; /* 设置内边距 */
  margin-left:20px;
}
</style>
